<template lang="pug">
mt-card
  .app-tree-list
    .app-tree-list-input
      mt-input(placeholder="请输入搜索内容"
        v-model="filterText",
        clearable
        )
    .app-tree-list-tree
      el-tree(class="filter-tree"
        :data="treeData"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        v-loading="loadingMap['appData']"
        ref="tree"
        )
  </template>

<script setup lang="ts">
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";

const model = defineModel("");
const $api = useApi();
//定义事件
const emit = defineEmits(["nodeClick"]);
const { request, data, loadingMap } = useRequest({});
//页面加载完执行
onMounted(() => {});
const treeData = computed(() => {
  return [
    {
      label: "质量指标控制统计报表(每月)",
      value: "1",
    },
    {
      label: "LIS细菌检出率(病区)",
      value: "2",
    },
    {
      label: "LIS申请项目统计",
      value: "3",
    },
    {
      label: "LIS标本签收统计",
      value: "4",
    },
    {
      label: "LIS抗生素敏感度统计",
      value: "5",
    },
    {
      label: "LIS失控单统计",
      value: "6",
    },
    {
      label: "LIS危急值统计",
      value: "7",
    },
    {
      label: "质量指标控制统计报表(半年)",
      value: "8",
    },
    {
      label: "LIS检验项目统计",
      value: "9",
    },
    {
      label: "LIS工作量统计(小组)",
      value: "10",
    },
    {
      label: "LIS工作量统计(仪器)",
      value: "11",
    },
    {
      label: "LIS工作量统计(人员)",
      value: "12",
    },
  ];
});

/**
 * 节点点击事件
 */
const nodeClick = (value: any, node: any, data: any) => {
  if (value && node && data) {
    emit("nodeClick", value.value);
  }
};

const filterText = ref("");
</script>

<style lang="less" scoped>
.app-tree-list {
  height: 100%;
  display: flex;
  flex-direction: column;

  &-input {
    flex-shrink: 0;
  }

  &-tree {
    flex: 1;
    overflow-y: auto;
    margin-top: var(--mt-margin);
  }
}
</style>
